<template>
  <div class="contentLayout">
    <Snackbar/>
    <van-pull-refresh class="agetntLayout" v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">
        <div v-for="item in mList">
          <div class="agentItem" v-on:click="$router.push({path:'/userStatistics/'+item.id})">
            <HeadImage :type="item.level" :width="40" :height="40"></HeadImage>
            <div class="itemContent">
              <div class="content">
                <p class="name">{{item.agentName}}</p>
                <div class="identityLayout">
                  <IdentityTag :type="item.agentLevel"></IdentityTag>
                </div>
              </div>
              <div class="content">
                <p class="direct">直推：{{item.directTotali}}人 - 收益:{{item.directScale}}%</p>
                <p class="indirect">间推：{{item.indirectTotali}}人 - 收益:{{item.indirectScale}}%</p>
              </div>
            </div>
          </div>
        </div>
      </van-list>

    </van-pull-refresh>
  </div>
</template>

<script>
  import Snackbar from '@/components/Snackbar/index'
  import HeadImage from '@/components/HeadImage/index'
  import IdentityTag from '@/components/IdentityTag/index'
  import {lowerUserList} from "@/api/user";

  export default {
    name: "agent-list",
    components: {Snackbar, HeadImage, IdentityTag},
    data() {
      return {
        loading: false,
        finished: false,
        refreshing: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        mList: []
      }
    },
    mounted() {
      // this.http(true);
    },
    methods: {
      http(init) {
        let _this = this;
        lowerUserList({
          pageNum: init ? 1 : this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize
        }).then(response => {
          if (init) {
            _this.mList = response.data;
            _this.queryParams.pageNum = 1;
          } else {
            let list = _this.mList;
            for (let i = 0; i < response.data.length; i++) {
              list.push(response.data[i]);
            }
            _this.mList = list;
          }
          _this.queryParams.pageNum += 1;
          _this.loading = false;
          _this.refreshing = false;
          _this.finished = response.data.length == 0;
        })
      },
      onRefresh() {
        this.finished = false;
        this.loading = false;
        this.http(true);
      },
      onLoad() {
        if (this.mList == null || this.mList.length == 0) {
          this.refreshing = true;
          this.http(true);
        } else {
          this.loading = true;
          this.http(false);
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import './list.scss';
</style>
